<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">

    /* 
     父传子：
     1. 在父组件的子组件标签上绑定一个自定义属性,属性值可以是任意数据类型。
     2. 在子组件中使用this.props 访问
    
    */
    class App extends React.Component{
        state = {
             list:[
                {
                    name:"张三",
                    age:18
                },{
                    name:"李四",
                    age:20
                }
             ],
             num:0,
             obj:{
                like:"学习",
                sex:"男"
             }
        }
        render(){
            // console.log(this)
            let {list,num,obj} = this.state;
            return (
                <div>
                    {
                        list.map((item,index)=>{
                            return <Child key={index} Item={item} num={num}/>
                        })
                    }
                    <button onClick={()=>{
                        this.setState((state)=>{
                            return {
                                num:state.num+1
                            }
                        })
                    }}>++</button>
                    <Two {...obj}/>
                </div>
            )
        }
    }
    class Child extends React.Component {
        constructor(props){
            super(props)
        }
        render(){
            console.log("渲染啦")
            console.log(this.props)
            let {Item,num} = this.props;
            return (
                <div>
                    {Item.name} ---- {Item.age}---{num}
                    <button onClick={()=>{
                        this.props.num ++;
                        this.forceUpdate();
                    }}>++</button>
                </div>
            )
        }
    }
    class Two extends React.Component {
         render(){
            console.log(this.props)
            let {like,sex}= this.props;
            return (
                <div>子组件---{like}----{sex}</div>
            )
         }
    }
    ReactDOM.render(<App/>,document.getElementById("root"))
    /* 
     props和state的区别：
     1. state 和 props都是只要发生改变就会重新渲染
     2. state表示组件内部状态 而props则是父组件传递给子组件的值
     3. props为只读属性 子组件不能直接更改props
    
    */
</script>
</html>